<!-- templates/index.html -->
<!DOCTYPE html>
<html>
  <head>
    <title>聊天机器人</title>
    <style>
      body {
        font-family: Arial, sans-serif;
        display: flex;
        justify-content: center;
        align-items: center;
        height: 100vh;
        margin: 0;
        background-color: #f5f5f5;
      }

      .chat-container {
        width: 600px;
        height: 800px;
        border: 1px solid #ccc;
        border-radius: 8px;
        background-color: white;
        display: flex;
        flex-direction: column;
      }

      .chat-header {
        padding: 15px;
        border-bottom: 1px solid #ccc;
        display: flex;
        justify-content: space-between;
        align-items: center;
      }

      .chat-messages {
        flex-grow: 1;
        overflow-y: auto;
        padding: 20px;
      }

      .input-container {
        padding: 20px;
        border-top: 1px solid #ccc;
        display: flex;
      }

      #message-input {
        flex-grow: 1;
        padding: 10px;
        border: 1px solid #ccc;
        border-radius: 4px;
        margin-right: 10px;
        font-size: 14px;
      }

      .button {
        padding: 10px 20px;
        background-color: #007bff;
        color: white;
        border: none;
        border-radius: 4px;
        cursor: pointer;
      }

      .button:hover {
        background-color: #0056b3;
      }

      #clear-button {
        background-color: #dc3545;
        margin-right: 10px;
      }

      #clear-button:hover {
        background-color: #c82333;
      }

      .message {
        margin-bottom: 10px;
        padding: 10px;
        border-radius: 4px;
        max-width: 80%;
        word-wrap: break-word;
      }

      .user-message {
        background-color: #007bff;
        color: white;
        margin-left: auto;
      }

      .bot-message {
        background-color: #e9ecef;
        margin-right: auto;
      }

      .message-time {
        font-size: 12px;
        color: #666;
        margin-top: 5px;
      }

      .typing-indicator {
        display: none;
        padding: 10px;
        color: #666;
      }
    </style>
  </head>
  <body>
    <div class="chat-container">
      <div class="chat-header">
        <h2>AI助手</h2>
        <button id="clear-button" class="button">清除历史</button>
      </div>
      <div class="chat-messages" id="chat-messages">
        <!-- 历史消息将在这里显示 -->
        {% for message in messages %}
        <div
          class="message {% if message.role == 'user' %}user-message{% else %}bot-message{% endif %}"
        >
          {{ message.content }}
        </div>
        {% endfor %}
      </div>
      <div class="typing-indicator" id="typing-indicator">AI正在思考...</div>
      <div class="input-container">
        <input type="text" id="message-input" placeholder="输入消息..." />
        <button id="send-button" class="button">发送</button>
      </div>
    </div>

    <script>
      document
        .getElementById("send-button")
        .addEventListener("click", sendMessage);
      document
        .getElementById("message-input")
        .addEventListener("keypress", function (e) {
          if (e.key === "Enter") {
            sendMessage();
          }
        });

      document
        .getElementById("clear-button")
        .addEventListener("click", clearHistory);

      function sendMessage() {
        const input = document.getElementById("message-input");
        const message = input.value.trim();
        const typingIndicator = document.getElementById("typing-indicator");

        if (message) {
          // 显示用户消息
          addMessage(message, "user-message");
          input.value = "";

          // 显示正在输入指示器
          typingIndicator.style.display = "block";

          // 发送到后端
          fetch("/chat", {
            method: "POST",
            headers: {
              "Content-Type": "application/json",
            },
            body: JSON.stringify({ message: message }),
          })
            .then((response) => response.json())
            .then((data) => {
              // 隐藏正在输入指示器
              typingIndicator.style.display = "none";

              // 显示AI回复
              const botResponse = data.response || "抱歉，没有收到回复";
              addMessage(botResponse, "bot-message");
            })
            .catch((error) => {
              console.error("Error:", error);
              typingIndicator.style.display = "none";
              addMessage("抱歉，发生了错误。", "bot-message");
            });
        }
      }

      function addMessage(text, className) {
        const messagesDiv = document.getElementById("chat-messages");
        const messageDiv = document.createElement("div");
        messageDiv.className = `message ${className}`;
        messageDiv.textContent = text;

        // 添加时间戳
        const timeDiv = document.createElement("div");
        timeDiv.className = "message-time";
        timeDiv.textContent = new Date().toLocaleTimeString();
        messageDiv.appendChild(timeDiv);

        messagesDiv.appendChild(messageDiv);
        messagesDiv.scrollTop = messagesDiv.scrollHeight;
      }

      function clearHistory() {
        if (confirm("确定要清除所有对话历史吗？")) {
          fetch("/clear_history", {
            method: "POST",
          })
            .then((response) => response.json())
            .then((data) => {
              // 清空消息显示区域
              document.getElementById("chat-messages").innerHTML = "";
            })
            .catch((error) => console.error("Error:", error));
        }
      }
    </script>
  </body>
</html>
